<template>
   <div class="wrap">
      <header>
         <div class="headTop">
            <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
            <span>外卖</span>
         </div>
         <div class="headSearch" @click="jump('search')">
            <img src="../../../static/img/sousuohei.png" alt="">
            <span>张记黄焖鸡米饭   满20减5</span>
         </div>
      </header>
      <div class="wwicon">
         <div class="wwiconbox" v-for="x in iconList" @click="jump(x.page)">
            <img :src="x.src" alt="">
            <span>{{x.text}}</span>
         </div>
      </div>
      <!-- 轮播图 -->
      <div class="lunbo">
         <div class="swiper-container" style="width: 100%;height:1.18rem;">
            <div class="swiper-wrapper" style="width: 100%;height:100%">
               <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="$store.state.imgurlApi+el.image">
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
         </div>
      </div>
      <div class="wcwrap">
         <div class="wctit"><span>精选好菜</span>
            <!--<p><span>查看更多</span><img src="../../../static/img/xiaozuo.png" alt=""></p>-->
         </div>
         <div class="wcboxwrap">
            <div class="wcbox" v-for="x in TJlist" @click="details(x)">
               <img :src="$store.state.imgurlApi+x.image" alt="">
               <div class="wcinfo">
                  <p>{{x.title}}</p>
                  <p>{{x.subtitle}}</p>
               </div>
            </div>
         </div>
      </div>
      <!--   综合排序部分   -->
      <van-sticky :offset-top="'.5rem'" z-index="9999" @scroll="stickyScroll">
         <div class="zhpxWrap">
            <div class="zhpx-head">
               <div class="zhpxTop" ref="zhpxTop">
                  <div @click="selectIndex=0">
                     <van-dropdown-menu :class="selectIndex==0?'sel':''">
                        <van-dropdown-item v-model="value1" :options="option1" @change="onConfirm"/>
                     </van-dropdown-menu>
                  </div>
                  <p :class="selectIndex==1?'sel':''" @click="selectIndex=1;label.big = 'distance'">距离</p>
                  <p :class="selectIndex==2?'sel':''" @click="selectIndex=2;label.big = 'sales'">销量</p>
               </div>
            </div>
            <div class="zhpx-bot">
               <p v-for="(x,y) in typeList" :class="typeIndex[y]?'type':''" @click="typeCallback(y,x)">{{x.text}}</p>
            </div>
            <div class="zhpx-itemWrap" :style="{maxHeight:$store.state.minHeight-1+'rem'}" ref="itemWrap" @scroll="itemWrapScroll($event)">
               <div class="lq-wrap">
                  <div class="zhpx-item" v-for="(x,y) in shopList" @click="goInfo(x)" v-if="x.store_info.length>1?true:false">
                     <img :src="$store.state.imgurlApi+x.door_photo_image" alt="">
                     <div class="zhpx-itemInfo">
                        <p class="zhpx-itemName">{{x.store_info[0].value?x.store_info[0].value:'商家'+y+'号'}}</p>
                        <div class="zhpx-itemPf">
                           <p>
                              <img src="../../../static/img/pingfenxing.png" alt=""><span style="color: #FFA100;padding-right: .1rem">{{4.5}}</span>
                              <span>月售{{x.store_info[18].value}}</span></p>
                           <p><span>{{30}}分钟&nbsp;{{2.5}}km</span></p>
                        </div>
                        <div class="zhpx-qs"><p>起送￥{{x.store_info[16].value}}</p><p>配送￥{{x.store_info[20].value}}</p><p>人均￥{{x.store_info[15].value}}</p></div>
                        <div class="zhpx-bs">{{'新城区西式快餐回头率飙升第4名'}}</div>
                        <div class="zhpx-yhj">
                           <p v-for="z in ['69减9', '89减20', '110减30', '5折起', '首单减16', '票']">{{z}}</p>
                        </div>
                     </div>
                  </div>
               </div>
               <van-loading size=".24rem" v-if="isLoading">正在加载...</van-loading>
               <p class="noMore" v-show="finished || shopList.length<5">没有更多啦 :）</p>
            </div>
         </div>
      </van-sticky>
   </div>
</template>

<script>
    import shopInfo from "./shopInfo";
    import Vue from 'vue';
    import {DropdownMenu, DropdownItem} from 'vant';

    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    import Swiper from 'swiper';
    import 'swiper/css/swiper.css';

    export default {
        name: "outFood",
        data() {
            return {
                iconList: [{text: '美食', src: '../../../static/img/ww1.png', page: 'wmDelicious'}, {
                    text: '甜点饮品',
                    src: '../../../static/img/ww2.png', page: 'wmDelicious'
                }, {text: '蔬菜水果', src: '../../../static/img/ww3.png', page: 'wmDelicious'}, {
                    text: '到店自取',
                    src: '../../../static/img/ww4.png',
                    page: 'wmDelicious'
                }
                    , {text: '快食简餐', src: '../../../static/img/ww5.png', page: 'wmDelicious'}, {
                        text: '下午茶',
                        src: '../../../static/img/ww6.png', page: 'wmDelicious'
                    }, {text: '汉堡披萨', src: '../../../static/img/ww7.png', page: 'wmDelicious'}
                    , {text: '日韩料理', src: '../../../static/img/ww8.png', page: 'wmDelicious'}, {
                        text: '川湘菜',
                        src: '../../../static/img/ww9.png', page: 'wmDelicious'
                    }, {text: '全部', src: '../../../static/img/ww10.png', page: 'wmDelicious'}],
                wcList: [],
                shopList: [],
                value1: 'weigh',
                option1: [
                    {text: '综合排序', value: 'weigh'},
                    {text: '好评优先', value: 'favourable'},
                    {text: '起送价最低', value: 'take_out_price'},
                    {text: '配送费最低', value: 'delivery_fee'},
                ],
                selectIndex: 0,
                typeList: [{text: '会员红包', id: 'value1'}, {text: '减免配送费', id: 'value2'}, {text: '免包装费', id: 'value3'}, {
                    text: '满减优惠',
                    id: 'value4'
                }],
                typeIndex: [false, false, false, false],
                lunbolist: [], // 轮播图
                TJlist: [], // 推荐商品
                isLoading: false, // 是否加载
                finished: false,
                scrollTop:0, // 记录上一次滚动高度
                label:{big:'weigh',smile:''}, // 当前筛选标签
                page:0, // 当前分页数
                lng:null,
                lat:null
            }
        },
        beforeCreate() {
            // 请求推荐商品
            this.$myAxios('api/goods/goods_list', 'post', {
                sort: 'sales'
            }).then(res => {
                if (res.data.code == '1') {
                    this.$nextTick(() => {
                        this.TJlist = res.data.data.list.splice(0, 4);
                    })
                } else {
                    this.$myNotice('网络跑偏了~', 1500)
                }
            });
            let vThis = this;
            // 获取当前位置经纬度
            new BMap.Geolocation().getCurrentPosition(
                function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        //通过Geolocation类的getStatus()可以判断是否成功定位。
                        console.info(r.point);
                        vThis.lat = r.point.lat;
                        vThis.lng = r.point.lng;
                        // 请求店铺数据
                        vThis.$myAxios('store/index/store_list','get',{
                            order:'weigh',
                            service_value:'',
                            page:0,
                            longitude:r.point.lng,
                            latitude:r.point.lat
                        }).then(res => {
                            if (res.data.code == 1) {
                                vThis.$nextTick(()=>{
                                    vThis.shopList = res.data.data;
                                    vThis.page += 1;
                                    console.log(vThis.shopList)
                                });
                            } else {
                                vThis.$myNotice('请检查网络~',1500)
                            }
                        })
                    }
                },
                {enableHighAccuracy: true}
            );
        },
        created() {
            // 请求轮播图
            this.$myAxios('index/index/banner', 'post', {
                type: 2
            }).then(res => {
                if (res.data.state == '1') {
                    this.lunbolist = res.data.banner;
                    this.$nextTick(() => {
                        this.initSwiper()
                    })
                } else {
                    this.$myNotice('网络有点慢~', 1500)
                }
            });
        },
        mounted() {

        },
        methods: {
            // 去商品详情
            details(x){
              this.$router.push({
                  name:'details',
                  query:{
                      id:x.id
                  }
              })
            },
            itemWrapScroll(e) {
                // console.log(e.srcElement.scrollTop, e.target.scrollTop)
                // console.log(e)
                // console.log(e.target.offsetHeight - e.target.offsetTop - 150)
                // 视窗高度 + 页面滚动偏移 = 元素位置
                // console.log(e.target.offsetHeight+'视窗高度');
                // console.log(e.target.scrollTop+'页面滚动偏移');
                // console.log($('.lq-wrap')[0].offsetHeight+'元素总高度');
                // console.log(e.target.offsetHeight+e.target.scrollTop+150);
                // console.log($('.lq-wrap')[0].offsetHeight)
                console.log(e.target.offsetHeight+e.target.scrollTop+200)
                if (e.target.offsetHeight+e.target.scrollTop+200 >= $('.lq-wrap')[0].offsetHeight && !this.isLoading && this.scrollTop < e.target.scrollTop) {
                    console.log('兄弟该加载东西了');
                    // console.log(e.target.scrollTop,e.target.offsetHeight - e.target.offsetTop - 150)
                    console.log(e);
                    this.isLoading = true;
                    var index = null;
                    for (var i in this.typeIndex) {
                        if (this.typeIndex[i]) {
                            index = this.typeList[i].id;
                            break;
                        }
                    }
                    // 请求店铺数据
                    this.$myAxios('store/index/store_list','get',{
                        order:this.label.big,
                        service_value:index?index:'',
                        page:this.page,
                        longitude:this.lng,
                        latitude:this.lat
                    }).then(res => {
                        if (res.data.code == 1) {
                            // this.finished = true;
                            if (res.data.data.length < 1) {this.finished = true;return;}
                            for (var i of res.data.data) {
                                this.shopList.push(i);
                                this.page+=1;
                                console.log('兄弟加载完成了');
                                this.isLoading = false;
                            }
                        } else {
                            this.$myNotice('请检查网络~',1500)
                        }
                    });
                    // this.finished = false;

                }
                this.scrollTop = e.target.scrollTop;
            },
            // 轮播图加载
            initSwiper() {
                //    这里配置swiper轮播图
                new Swiper('.swiper-container', {
                    observer: true,
                    observeParents: true,
                    circular: true,
                    loop: true, // 循环模式选项
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false
                    }
                });
            },
            // 滚动监听
            stickyScroll(res) {
                if (res.isFixed) {
                    $(this.$refs.itemWrap).css('overflowX', 'hidden');
                    $(this.$refs.zhpxTop).slideUp();
                } else {
                    $(this.$refs.itemWrap).css('overflowX', 'inherit');
                    $(this.$refs.zhpxTop).slideDown();
                }
            },
            back() {
                this.$router.back();
            },
            goInfo(x) {
                this.$router.push({
                    name: 'shopInfo',
                    query:{
                        id:x.id
                    }
                })
            },
            jump(page) {
                this.$router.push({
                    name: page
                })
            },
            onConfirm(value) {
                console.log(value);
                var obj = {...this.label};
                obj.big = value;
                this.label = obj;
                for (var i = 0; i < this.option1.length; i++) {
                    if (this.option1[i].text == value) {
                        break;
                    }
                }
                i != this.option1.length ? this.selectIndex = 0 : this.selectIndex = 3;
                console.log(this.selectIndex)
            },
            typeCallback(y,x) {
                var arr = this.typeIndex.slice(0,);
                arr[y] = !arr[y];
                this.typeIndex = arr;
                var obj = {...this.label};
                obj.smile = x.id;
                this.label = obj;
            }
        },
        watch:{
            label(){
                console.log(this.label.big);
                var index = null;
                for (var i in this.typeIndex) {
                    if (this.typeIndex[i]) {
                        index = this.typeList[i].id;
                        break;
                    }
                }
                this.page = 0;
                // 请求店铺数据
                this.$myAxios('store/index/store_list','get',{
                    order:this.label.big,
                    page:0,
                    service_value:index?index:'',
                    longitude:this.lng,
                    latitude:this.lat
                }).then(res => {
                    if (res.data.code == 1) {
                        // this.finished = true;
                        if (res.data.code == 1) {
                            this.shopList = res.data.data;
                            this.page += 1;
                            console.log(this.shopList)
                        } else {
                            this.$myNotice('请检查网络~',1500)
                        }
                    } else {
                        this.$myNotice('请检查网络~',1500)
                    }
                });
            }
        }
    }
</script>

<style scoped>
   .wrap {
      width: 100%;
      box-sizing: border-box;
      padding-top: .8rem;
      background-color: #F5F5F5;
   }

   header {
      background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      position: fixed;
      width: 100%;
      height: .9rem;
      top: -.1rem;
      left: 0;
      z-index: 9999;
      box-sizing: border-box;
      padding-top: .1rem;
      border-radius: 330% / 56%;
   }

   .headTop {
      width: 100%;
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      position: relative;
      justify-content: center;
   }

   .headTop > span {
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
   }

   .headTop > img {
      width: .08rem;
      height: .13rem;
      position: absolute;
      left: .15rem;
   }

   .headSearch {
      width: 2.71rem;
      box-sizing: border-box;
      height: .35rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 .03rem .05rem 0 rgba(4, 0, 0, 0.15);
      border-radius: .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      padding-left: .18rem;
      position: absolute;
      bottom: -.15rem;
      left: 0;
      right: 0;
      margin: 0 auto;
   }

   .headSearch > img {
      width: .14rem;
      height: .14rem;
      margin-right: .1rem;
   }

   .headSearch > span {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }

   .wwicon {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: .4rem .1rem 0 .1rem;
      background-color: #ffffff;
   }

   .wwiconbox {
      width: 20%;
      height: .5rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .15rem;
   }

   .wwiconbox > img {
      width: .28rem;
      height: .25rem;
   }

   .wwiconbox > span {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
   }

   .wwbanner {
      display: block;
      width: 3.54rem;
      height: 1.18rem;
      margin: 0 auto .1rem;
   }

   .wcwrap {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem;
      background-color: #ffffff;
      margin-bottom: .1rem;
   }

   .wctit {
      height: .3rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC;
      margin-bottom: .1rem;
   }

   .wcboxwrap {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
   }

   .wctit > span {
      font-size: .15rem;
      font-weight: 500;
      color: #262626;
   }

   .wctit > p > span {
      font-size: .12rem;
      font-weight: 500;
      color: #B5B5B5;
   }

   .wctit > p {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .wctit > p > img {
      width: .05rem;
      height: .08rem;
      margin-left: .1rem;
   }

   .wcbox {
      width: 1.67rem;
      background: rgba(255, 255, 255, 1);
      border-radius: .1rem .1rem .1rem .1rem;
      font-family: PingFang SC;
      font-size: 0;
      margin-bottom: .1rem;
      box-shadow: 0 .03rem .05rem 0 rgba(4, 0, 0, 0.15);
   }

   .wcbox > img {
      min-width: 100%;
      height: 1.1rem;
   }

   .wcinfo {
      padding: .05rem;
   }

   .wcinfo > p:nth-child(1) {
      font-size: .12rem;
      font-weight: 500;
      color: #262626;
      margin-bottom: .05rem;
      max-width: 1.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .wcinfo > p:nth-child(2) {
      font-size: .09rem;
      font-weight: 500;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .zhpxWrap {
      background-color: #ffffff;
      font-family: PingFang SC;
   }

   .zhpxTop {
      width: 100%;
      height: .5rem;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      align-items: center;
      /*justify-content: space-around;*/
      padding: 0 .1rem;
      border: .01rem solid rgba(245, 245, 245, 1);
      position: relative;
   }
   .zhpxTop>div:nth-child(1) {
      justify-self: flex-start;
   }
   .zhpxTop>div {
      margin-right: .2rem;
   }
   .zhpxTop > div > img {
      width: .09rem;
      height: .05rem;
      margin-left: .05rem;
   }

   .zhpxTop > div > span, .zhpxTop > p > span {
      font-size: .13rem;
      font-weight: 400;
      color: #666666;
   }

   .zhpxTop > div:nth-child(1) > span {
      font-size: .14rem;
      font-weight: bold;
      color: #333333;
   }

   .zhpx-bot {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem;
      background-color: #ffffff;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-around;
   }

   .zhpx-bot > p {
      height: .33rem;
      background: rgba(245, 245, 245, 1);
      border-radius: .02rem;
      padding: 0 .1rem;
      font-size: .12rem;
      font-weight: 500;
      line-height: .33rem;
      text-align: center;
      color: #333333;
   }

   .zhpx-itemWrap {
      width: 100%;
      box-sizing: border-box;
      padding: .05rem .1rem;
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
   }

   .zhpx-item {
      width: 3.48rem;
      background: rgba(255, 255, 255, 1);
      border-radius: .05rem;
      box-sizing: border-box;
      padding: .1rem .05rem;
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      margin-bottom: .1rem;
   }

   .zhpx-item > img {
      width: .67rem;
      height: .51rem;
   }

   .zhpx-itemInfo {
      margin-left: .1rem;
      font-family: PingFang SC;
      width: 75%;
   }

   .zhpx-itemName {
      font-size: .15rem;
      color: #333333;
      font-weight: bold;
   }

   .zhpx-itemPf {
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .zhpx-itemPf > p:nth-child(1) > img {
      width: .1rem;
      height: .1rem;
      margin-right: .05rem;
   }

   .zhpx-itemPf > p, .zhpx-qs > p {
      font-size: .1rem;
      font-weight: 400;
      color: #666666;
   }

   .zhpx-qs {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .zhpx-qs > p {
      margin-right: .1rem;
   }

   .zhpx-bs {
      display: inline-block;
      background-color: #FFF0E9;
      border-radius: .03rem;
      padding: 0 .05rem;
      font-size: .1rem;
      font-weight: bold;
      color: #FF6E28;
   }

   .zhpx-yhj {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-between;
   }

   .zhpx-yhj > p {
      border: .01rem solid rgba(254, 220, 218, 1);
      border-radius: .02rem;
      padding: 0 .02rem;
      font-size: .1rem;
      font-weight: bold;
      color: #FF4621;
   }

   .zhpx-yhj > p:nth-last-child(1) {
      border-color: #EDECEC;
      color: #615F5B;
   }

   .zhpx-itemName, .zhpx-itemPf, .zhpx-qs, .zhpx-bs {
      margin-bottom: .08rem;
   }

   /* 下拉菜单 */
   /deep/ .van-dropdown-menu {
      width: .8rem;
      height: .48rem !important;
      background-color: transparent;
   }

   /deep/ .van-dropdown-menu__title {
      padding: 0 .08rem;
      font-size: .14rem;
      line-height: .18rem;
      max-width: inherit;
   }

   /deep/ .van-dropdown-menu__title::after {
      position: absolute;
      top: 50%;
      right: -.04rem;
      margin-top: -.05rem;
      border: .03rem solid;
      border-color: transparent transparent currentColor currentColor;
      opacity: .8;
      content: '';
   }

   /*>>> .van-dropdown-item--down {*/
   /*  top: 2.45rem !important;*/
   /*}*/
   >>> .van-cell {
      padding: .1rem .16rem;
      overflow: hidden;
      color: #323233;
      font-size: .14rem;
      line-height: .24rem;
      background-color: #fff;
   }

   >>> .van-cell:not(:last-child)::after {
      left: .16rem;
      border-bottom: .01rem solid #ebedf0;
   }

   >>> .van-dropdown-menu__title {
      color: inherit;
   }

   .sel {
      color: #FF7814 !important;
   }

   .type {
      background-color: #FFECE0 !important;
      color: #FF7814 !important;
   }


   .lunbo {
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      height: 1.18rem;
      padding: 0 .1rem;
      overflow: hidden;
   }

   .lunbo > div {
      border-radius: .05rem;
   }

   /* 轮播图小圆点颜色改变 */
   >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
      background: rgba(252, 216, 144, .68) !important;
   }

   >>> .swiper-pagination-bullets {
      bottom: 0;
   }

   /* 下拉菜单适配 */
   >>> .van-dropdown-menu__bar {
      box-shadow: none;
      height: inherit;
   }
   >>> .van-cell__title {
      padding-left: .06rem;
   }
   .noMore {
      height: .3rem;
      line-height: .3rem;
      text-align: center;
      font-size: .13rem;
      color: #999999;
      font-family: PingFang SC;
   }
   .zhpxTop>p {
      padding: 0 .05rem;
      margin: 0 .15rem;
      font-size: .14rem;
   }
</style>
